import React,{PropTypes,Component,PureComponent}  from 'react';
import {Select ,Button ,Tree ,Modal, Form, Input, TreeSelect,Row,Col } from 'antd';
import { connect } from 'react-redux';
const TNode = Tree.TreeNode;

// table column  树形图
const treeData = [
  {
    title: '基本信息',
    key:'0',
    children: [
      {
        title: '基金经理',
        key: 'fundManager',
      },
      {
        title: '产品名称',
        key: 'productName',
      },
      {
        title: '基金代码',
        key: 'fundCode',
      },
      {
        title: '投资策略',
        key: 'investStrategy',
      },
      {
        title: '单位净值',
        key: 'unitnav',
      },
      {
        title: '成立年限',
        key: 'establishAge',
      },
      {
        title: '状态',
        key: 'status',
      },
      {
        title: '基金规模',
        key: 'fundScale',
      },
    ]
  },
  {
    title: '收益率',
    key:'1',
    children: [
      {
        title: '年化收益',
        key: 'annualYieldRate',
      },
    ]
  },
  {
    title: '风险调整收益',
    key:'2',
    children: [
      {
        title: 'Alpha',
        key: 'alpha',
      },
      {
        title: 'Sharpe',
        key: 'sharpeRatio',
      },
      {
        title: 'Treynor',
        key: 'treynorRatio',
      },
      {
        title: 'IR',
        key: 'informationRatio',
      },
      {
        title: 'Sortino',
        key: 'sortinoRatio',
      },
      {
        title: 'M2',
        key: 'm2',
      },
      {
        title: 'Calmar',
        key: 'calmarRatio',
      },
    ]
  },
  {
    title: '风险分析',
    key:'3',
    children: [
      {
        title: 'VAR',
        key: 'var',
      },
      {
        title: '年化波动率',
        key: 'volatility',
      },
      {
        title: 'CTE',
        key: 'cte',
      },
      {
        title: 'TE',
        key: 'te',
      },
      {
        title: 'Beta',
        key: 'beta',
      },
      {
        title: '最大回撤',
        key: 'maxDrawdown',
      },
    ]
  }
]

const mapStateToProps = state => ({

});
const mapDispatchToProps = {
 changeColumns: query => ({
   type: 'fundpool/changeColumns',
   payload: query || {},
 }),
 MAchangeColumns: query => ({
   type: 'myattention/MAchangeColumns',
   payload: query || {},
 }),
};

@connect( mapStateToProps,mapDispatchToProps)
export default class Tablecolumns extends React.Component {
  static propTypes = {
    changeColumns: PropTypes.func.isRequired,
  }
  state = {
    expandedKeys: ['0','1','2','3'],//展开指定的树节点
    autoExpandParent: true,//是否自动展开父节点
    checkedKeys: ['productName','fundCode', 'unitnav', 'fundManager', 'investStrategy', 'sharpeRatio', 'annulVolatility'],//受控父子节点关联
    selectedKeys: [],//设置选中的树节点
  }
  //展开收起节点时触发
  onExpand = (expandedKeys) => {
    console.log('onExpand', arguments);
    this.setState({
      expandedKeys,
      autoExpandParent: false,
    });
  }
  //点击复选框触发
  onCheck = (checkedKeys) => {
    const { changeColumns,MAchangeColumns,Homestatus,GroupStatus  } = this.props;
    console.log('onCheck', checkedKeys);
    console.log("onCheck>>>>>>>",this.props);
    this.setState({ checkedKeys });
    // if(_.isEmpty(checkedKeys)) {
    //   this.setState({ checkedKeys:['productName','fundCode', 'unitnav', 'fundManager', 'investStrategy', 'sharpeRatio', 'annulVolatility'] });
    // }
    if(Homestatus){
      changeColumns(checkedKeys);
    }
    if(GroupStatus){
      MAchangeColumns(checkedKeys)
    }

  }
  // 点击树节点触发
  onSelect = (selectedKeys, info) => {
    console.log('onSelect', info);
    this.setState({ selectedKeys });
  }
  renderTreeNodes = (data) => {
    return data.map((item) => {
      if (item.children) {
        return (
          <TNode title={item.title} key={item.key} dataRef={item}>
            {this.renderTreeNodes(item.children)}
          </TNode>
        );
      }
      return <TNode {...item} />;
    });
  }

  render() {
    return (
      <Tree
        checkable
        onExpand={this.onExpand}
        expandedKeys={this.state.expandedKeys}
        autoExpandParent={this.state.autoExpandParent}
        onCheck={this.onCheck}
        checkedKeys={this.state.checkedKeys}
        onSelect={this.onSelect}
        selectedKeys={this.state.selectedKeys}
      >
        {this.renderTreeNodes(treeData)}
      </Tree>
    );
  }
}
